import { LoadingOutlined } from '@ant-design/icons'
import { Card } from 'antd'
import { useState } from 'react'
import '../index.less'

const activeColor = '#5964F3'
const inactiveColor = '#7587A5'

const ChartContainer = ({
  title = '标题',
  subtitle = '',
  onChartTypeChange = (_chartType: string) => {},
  onDownload = () => {},
  children
}) => {
  const [type, setType] = useState('line')
  const [downloading, setDownloading] = useState(false)

  const handleIconClick = (chartType: string) => {
    console.log('ChartContainer chartType', chartType)
    setType(chartType)
    onChartTypeChange(chartType)
  }
  const handleDownload = () => {
    console.log('ChartContainer download')
    setDownloading(true)
    try {
      onDownload()
    } catch (error) {
      console.error('download error', error)
    }
    setTimeout(() => {
      setDownloading(false)
    }, 1000)
  }

  return (
    <div className="chart-container">
      <Card hoverable bordered={false}>
        <div className="chart-header">
          <div className="chart-title">
            {title}
            <span className="chart-title-sub">{subtitle}</span>
          </div>
          <div className="chart-icons">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              onClick={() => handleIconClick('line')}
            >
              <path
                d="M4 4V16H16"
                stroke={`${type === 'line' ? activeColor : inactiveColor}`}
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M7 11L9.5 8.5L12 11L16 7"
                stroke={`${type === 'line' ? activeColor : inactiveColor}`}
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              onClick={() => handleIconClick('bar')}
            >
              <path
                d="M4 7V16H8V7H4Z"
                stroke={`${type === 'bar' ? activeColor : inactiveColor}`}
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M8 4V16H12V4H8Z"
                stroke={`${type === 'bar' ? activeColor : inactiveColor}`}
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M12 10V16H16V10H12Z"
                stroke={`${type === 'bar' ? activeColor : inactiveColor}`}
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            <div className="chart-icons-split"></div>
            {downloading ? (
              <div className="h-[20px] w-[20px]">
                <LoadingOutlined />
              </div>
            ) : (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                onClick={() => handleDownload()}
              >
                <path
                  d="M7 7L10 4L13 7"
                  stroke="#7587A5"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path d="M10 4L10 12" stroke="#7587A5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                <path
                  d="M4 12V16H16V12"
                  stroke="#7587A5"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            )}
          </div>
        </div>
        {children}
      </Card>
    </div>
  )
}

export default ChartContainer
